<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <title>04-js作业-螺旋</title>
    <style>
        html{font-family: "Microsoft YaHei";}
        body,ul,p{margin: 0;cursor: default;}
        ul{padding: 0;list-style:none;}
        input{border: 0;padding: 0;vertical-align: middle;}
        body{
            padding: 30px 50px;
        }
        .clearfix:after{
            display: block;
            clear: both;
            content: "";
        }
        #wrap{
            width: 400px;
            border: 1px solid #000;
        }
        .topbox{
            height: 35px;
            background-color: #000;
        }
        .topbox p:nth-child(1){
            float: left;
            margin: 0 10px;
            font-size: 14px;
            font-weight: 700;
            line-height: 35px ;
            color: #fff;
        }
        .topbox p:nth-child(3){
            float: right;
            width: 35px;
            height: 35px;
            font-size: 20px;
            font-weight: 700;
            line-height: 35px ;
            color: #fff;
            text-align: center;
            cursor: pointer;
        }
        #box1{
            float: left;
            padding: 5px 0;
            height: 35px;
            font-size: 0;
            box-sizing: border-box;
        }
        .dp-n{
            display: none;
        }
        .dp-b{
            display: block;
        }
        [type = "text"]{
            margin: 0;
            padding: 0 4px;
            width: 150px;
            height: 25px;
            background-color: #fff;
            border: 0;
            font-size: 12px;
            color: #666;
        }
        [type = "submit"]{
            display: inline-block;
            width: 50px;
            height: 25px;
            background-color: #fe9900;
            font-size: 12px;
            color: #fff;
            cursor: pointer;
        }
        #list{
            padding: 0 10px;
            font-size: 12px;
            box-sizing: border-box;
        }
        #list li{
            border-bottom: 1px dotted #ccc;
        }
        #list li a{
            text-decoration: none;
            line-height: 35px;
            color: #666;
        }
        #list li a:hover{
            color: #f00;
        }
    </style>
</head>
<body>
    <section id="wrap">
        <div class="topbox clearfix">
            <p>螺旋作业</p>
            <div id="box1" class="dp-n">
                <input type="text" id="tex">
                <input type="submit" id="sub" value="添加">
            </div>
            <p id="add">+</p>
        </div>
        <ul id="list"></ul>
    </section>
</body>
<script>
    var add = document.getElementById('add');
    var box1 = document.getElementById('box1');
    var tex = document.getElementById('tex');
    var sub = document.getElementById('sub');
    var list = document.getElementById('list');
    add.onclick = function(){
        box1.className = 'dp-b';
    };
    sub.onclick = function(){
        box1.className = 'dp-n';
        list.innerHTML = list.innerHTML + '<li><a href="#">' + tex.value + '</a></li>';
        tex.value = '';
    };
</script>
</html>